<template>
  <div class="container" v-loading="status_loading">
    <h2 class="title">{{$t('m.transposing.info')}}</h2>
    <el-row>
      <el-form :model="formInline">
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.transposing.code')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.locationshiftcode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.state')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.state"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.creator')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.creator" placeholder></el-input>
          </el-form-item>
           <el-form-item v-if="obj.parentName=='transposingHistory'" :label="$t('m.transposing.modifier')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.modifier" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.createdate')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.createdate"></el-input>
          </el-form-item>
           <el-form-item v-if="obj.parentName=='transposingHistory'" :label="$t('m.transposing.finish')" :label-width="formLabelWidth">
            <el-input disabled v-model="formInline.modifydate" placeholder></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          stripe
          empty-text
          fits
          class="single-select-table"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="tableRowClassName"
          @row-click="rowClick"
          @selection-change="handleSingleSelectionChange"
        >
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="sourcelocationcode" label="Source Location"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
          <el-table-column label="ProductName" align="center" prop="productname" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="productspec" label="Specification" show-overflow-tooltip></el-table-column>
          <el-table-column label="BatchNum" align="center" prop="batchnum"></el-table-column>
          <el-table-column align="center" prop="quantity" label="Shift Qty"></el-table-column>
          <el-table-column align="center" prop="targetlocationcode" label="Target Location"></el-table-column>
        </el-table>

        <el-button type="primary" @click="back">{{$t('m.close')}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  data(){
    return {
      status_loading:false,
      formInline:{},
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'140px',
      id:null //移位单id
    }
  },
  props:['obj'], //父组件传给子组件的数据
  components:{},
  watch:{},
  computed:{},
  methods:{
    getInfo(){
      this.$axios({
        method:'get',
        url:`/locationshift/${this.obj.id}`
      }).then(({data})=> {
        this.tableData = data.locationShiftDetailList
        this.formInline = data
        if (data.state === 1){
          this.formInline.state = this.$t('m.transposing.state1')
        }
        if (data.state === 2){
          this.formInline.state = this.$t('m.transposing.state2')
        }
        if (data.state === 3){
          this.formInline.state = this.$t('m.transposing.state3')
        }
        if (data.state === 4){
          this.formInline.state = this.$t('m.review.state3')
        }
        this.formInline.createdate = common.timestampToTime(
          data.createdate
        )
        this.formInline.modifydate = common.timestampToTime(
          data.modifydate
        )
        this.status_loading = false
      })
    },
    back(){
      //移位和移位历史共用一个详情页面，所以要判断返回哪个页面
      if (this.obj.parentName == 'transposingHistory'){
        let obj = {
          componentName:'history'
        }
        this.$emit('switchComponent', obj)
      } else {
        let obj = {
          componentName:'transposing'
        }
        this.$emit('switchComponent', obj)
      }
    },
    print(){}
  },
  activated(){
    this.status_loading = true
    // this.id = this.$route.query.id;
    if (this.obj.id){
      this.getInfo()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.title {
  margin-bottom: 30px;
}
</style>